<style lang="scss">
  @import "../../styles/base";

  page {
    background-color: #f5f5f5;
    height: 100vh;
  }

  .container {
    height: 100vh;
    .bg {
      display: block;
      width: 100vw;
      height: 100vh;
    }
    .btn-set {
      position: absolute;
      right: pxToRem(50);
      top: pxToRem(175);
      width: pxToRem(120);
      height: pxToRem(120);
    }
    .device-list-wrap {
      @include middle-center-y(fixed);
      left: pxToRem(80);
      width: pxToRem(385);
      padding: pxToRem(150) pxToRem(30) pxToRem(200);
      box-sizing: border-box;
      background-color: #fff;
      border-radius: pxToRem(30);
      .device {
        position: relative;
        margin-bottom: pxToRem(80);
        text-align: center;
        .btn-edit {
          position: absolute;
          top: 0;
          right: 0;
          width: pxToRem(50);
          height: pxToRem(50);
        }
        .btn-remove {
          position: absolute;
          top: pxToRem(170);
          right: 0;
          width: pxToRem(50);
          height: pxToRem(50);
        }
        .product-img {
          width: pxToRem(194);
          height: pxToRem(217);
          margin-bottom: pxToRem(20);
        }
        .product-name {
          font-size: pxToRem(40);
          font-weight: bold;
          &.disabled {
            color: #999;
          }
        }
      }
      .btn-add {
        @include middle-center-x();
        bottom: 50rpx;
        height: pxToRem(90);
        line-height: pxToRem(90);
        width: pxToRem(280);
        text-align: center;
        font-size: pxToRem(45);
        color: #999;
        border: pxToRem(1) solid #999;
        border-radius: pxToRem(45);
        z-index: 1000;
      }
    }
  }

  .edit-dialog-wrap {
    position: fixed;
    left: 0;
    width: 100vw;
    top: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    .edit-dialog {
      @include middle-center();
      width: 620rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .title {
        padding-bottom: 50rpx;
        padding-top: 50rpx;
        text-align: center;
        font-size: 32;
      }
      .name {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30rpx;
        width: 500rpx;
        border: 1rpx solid #d2d3d5;
        padding: 10rpx;
        font-size: 30rpx;
      }
      .footer {
        display: flex;
        align-items: center;
        border-top: 1rpx solid #d2d3d5;
        .btn-cancel, .btn-confirm {
          flex: 1;
          text-align: center;
          color: #000000;
          font-size: 32rpx;
          height: 100rpx;
          line-height: 100rpx;
        }
        .btn-confirm {
          color: #4eca34;
          border-left: 1rpx solid #d2d3d5;
        }
      }
    }
  }
</style>
<template>
  <div class="container" :class="isIphoneX ? 'iphoneX':''">
    <img class="bg" mode="aspectFill" src="https://image.watsons.com.cn//upload/1c7c4125.jpg">
    <img class="btn-set" @click="setConfig" mode="aspectFill" src="/static/img/device-list/set.png">
    <div class="device-list-wrap" :style="{height: height}">
      <scroll-view class="device-list-scroll" :scroll-y="true" :style="{height: scrollHeight}">
        <div class="device-list">
          <div class="device" v-for="(device,index) in deviceList" :key="index">
            <img class="product-img" @click="toDevice(device)" src="/static/img/device-list/product.png">
            <img v-if="isEdit" @click.stop="toEdit(device)" class="btn-edit" src="/static/img/device-list/edit.png">
            <img v-if="isEdit" @click.stop="remove(device)" class="btn-remove" src="/static/img/device-list/remove.png">
            <div class="product-name" :class="{disabled: !device.is_online}">
              {{device.dev_alias || device.product_name}}
              <div>({{device.is_online ? '在线':'离线'}})</div>
            </div>
          </div>
        </div>
      </scroll-view>
      <div class="btn-add" @click="add">添加设备</div>
    </div>
    <div class="edit-dialog-wrap" v-if="showEdit">
      <div class="edit-dialog">
        <div class="title">设备名称</div>
        <input class="name" v-model="name" placeholder="请输入设备名称"/>
        <div class="footer">
          <div class="btn-cancel" @click="showEdit = false;">取消</div>
          <div class="btn-confirm" @click="setRemark">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        deviceList: [],
        height: (App.systemInfo.screenHeight - 200) * 750 / App.systemInfo.screenWidth + 'rpx',
        scrollHeight: (App.systemInfo.screenHeight - 320) * 750 / App.systemInfo.screenWidth + 'rpx',
        isEdit: false,
        showEdit: false,
        name: '',
      }
    },
    components: {},
    methods: {
      toEdit(device) {
        this.showEdit = true;
        this.currentDevice = device;
        this.name = device.dev_alias || device.product_name;
      },
      async setRemark() {
        if (!this.name) {
          wx.showToast({
            title: '请输入设备名称',
            icon: 'none'
          })
          return false;
        }
        await wx.request({
          method: 'PUT',
          url: '/app/bindings/' + this.currentDevice.did,
          data: {
            dev_alias: this.name
          },
          header: {
            'X-Gizwits-User-token': App.userInfo.token,
          }
        })
        wx.showToast({
          title: '修改成功',
          icon: 'none'
        })
        this.showEdit = false;
        this.loadData();
      },
      async remove(device) {
        wx.showModal({
          title: '提示',
          content: '确定解绑该设备?',
          showCancel: true,
          success: async result => {
            if (result.confirm) {
              const deviceListResult = await wx.request({
                method: 'DELETE',
                url: '/app/bindings',
                data: {
                  devices: [ device ],
                  did: device.did,
                },
                header: {
                  'X-Gizwits-User-token': App.userInfo.token,
                }
              })
              if (deviceListResult.success.length) {
                wx.showToast({
                  title: '解绑成功',
                  icon: 'none'
                })
                this.loadData();
              }
            }
          }
        })
      },
      setConfig() {
        this.isEdit = !this.isEdit;
      },
      add() {
        wx.navigateTo({ url: '/pages/network/main' })
      },
      toDevice(device) {
        if (!device.is_online) {
          wx.showToast({
            title: '设备不在线',
            icon: 'none'
          })
          return false;
        }
        App.currentDevice = device;
        wx.navigateTo({ url: '/pages/config/main' })
      },
      async loadData() {
        const deviceListResult = await wx.request({
          url: '/app/bindings',
          data: {
            show_disabled: 0,
            limit: 40,
            skip: 0,
          },
          header: {
            'X-Gizwits-User-token': App.userInfo.token,
          }
        })
        console.info(deviceListResult)
        this.deviceList = deviceListResult.devices;
      },
    },
    async onShow() {
      console.info(App.systemInfo)
      if (!App.userInfo) {
        await App.fetchLogin();
      }
      this.isEdit = false;
      await this.loadData();
      wx.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#f0f0f0',
        animation: {
          duration: 400,
          timingFunc: 'easeIn'
        }
      })
    },
  }
</script>
